<script setup lang="ts">
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'
import { onMounted, ref, watch, watchEffect } from 'vue'

const instanceRef = ref()

const props = defineProps({
  value: {
    type: String,
    required: true
  },
  language: {
    type: String,
    required: true
  },
  height: {
    type: Number,
    default: 800
  }
})

let monacoInstance: any

// 挂载之后
onMounted(() => {
  monacoInstance = monaco.editor.create(instanceRef.value, {
    value: props.value || '空空如也',
    language: props.language,
    readOnly: true,
    automaticLayout: true
  })
})

//监听值得变化
watch(() => props.value, (value, oldValue) => {
  if (monacoInstance) {
    monacoInstance.setValue(props.value)
  }
}, {
  immediate: true,
  deep: true
})

</script>

<template>
  <div ref="instanceRef" class=" h-full" :style="{height: `${height}px`}"></div>
</template>
